<template>
  <div class="monthStatement">
    <div class="header">
      <h1>考勤月报表</h1>
      <div class="header-right">
        <i class="el-icon-s-home"></i>
        <span class="font-left">首页</span>
        <i class="el-icon-arrow-right"></i>
        <span class="font-right">考勤周报表</span>
      </div>
    </div>
    <div class="content">
      <div class="bar">
        <div class="barLeft">
          <el-button type="primary" icon="el-icon-printer" size="mini" @click="printMySendList">打印</el-button>
          <el-button type="info" icon="el-icon-arrow-left" size="mini" @click="reduceMonth">上一月</el-button>
          <el-button type="info" icon="el-icon-arrow-right" size="mini" @click="increaseMonth">下一月</el-button>
          <div><span>{{ nowMonth }}</span></div>
        </div>
        <div class="barRight">
          <el-input v-model="input" placeholder="查找..." class="barInput" size="mini"></el-input>
          <el-button slot="append" icon="el-icon-search" size="mini"></el-button>
        </div>
      </div>
      <vue-easy-print v-show="false" ref="easyPrint" :table-show="false" :space-row="true">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="depName" label="部门"></el-table-column>
          <el-table-column prop="username" label="成员" width="150"></el-table-column>
          <el-table-column prop="type1" label="上班" width="150"></el-table-column>
          <el-table-column prop="type2" label="下班" width="150"></el-table-column>
          <el-table-column prop="type3" label="外出" width="150"></el-table-column>
          <el-table-column prop="type4" label="请假" width="150"></el-table-column>
          <el-table-column prop="type5" label="加班" width="150"></el-table-column>
          <el-table-column prop="status1" label="正常" width="150"></el-table-column>
          <el-table-column prop="status2" label="迟到" width="150"></el-table-column>
          <el-table-column prop="status3" label="早退" width="150"></el-table-column>
          <el-table-column prop="status4" label="旷工" width="150"></el-table-column>
        </el-table>
      </vue-easy-print>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="depName" label="部门"></el-table-column>
        <el-table-column prop="username" label="成员" width="150"></el-table-column>
        <el-table-column prop="type1" label="上班" width="150"></el-table-column>
        <el-table-column prop="type2" label="下班" width="150"></el-table-column>
        <el-table-column prop="type3" label="外出" width="150"></el-table-column>
        <el-table-column prop="type4" label="请假" width="150"></el-table-column>
        <el-table-column prop="type5" label="加班" width="150"></el-table-column>
        <el-table-column prop="status1" label="正常" width="150"></el-table-column>
        <el-table-column prop="status2" label="迟到" width="150"></el-table-column>
        <el-table-column prop="status3" label="早退" width="150"></el-table-column>
        <el-table-column prop="status4" label="旷工" width="150"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import vueEasyPrint from 'vue-easy-print'
import dayjs from 'dayjs'
export default {
  name: '',
  components: {

    vueEasyPrint,
  },
  mixins: [],
  props: {

  },
  data() {
    return {
      input: "",
      tableData: [
      ],
      firstDay: "",
      lastDay: "",
      //显示当前月份
      firstDay: "",
      lastDay: "",
      nowMonth: "",



    }
  },
  computed: {

  },
  watch: {

  },
  mounted() {

  },
  methods: {
    //月份增加；
    increaseMonth() {
      this.nowMonth = dayjs(this.nowMonth).add(1, 'month').format('YYYY-MM');
      this.firstDay = dayjs(this.nowMonth).startOf('month').format('YYYY-MM--DD');
      this.lastDay = dayjs(this.nowMonth).endOf('month').format('YYYY-MM--DD')
      // console.log(this.nowMonth);
      // console.log(this.firstDay);
      // console.log(this.lastDay);
      this.attMonthData()


    },
    //月份减少；
    reduceMonth() {
      this.nowMonth = dayjs(this.nowMonth).subtract(1, 'month').format('YYYY-MM');
      this.firstDay = dayjs(this.nowMonth).startOf('month').format('YYYY-MM--DD');
      this.lastDay = dayjs(this.nowMonth).endOf('month').format('YYYY-MM--DD');
      // console.log(this.nowMonth);
      // console.log(this.firstDay);
      // console.log(this.lastDay);
      this.attMonthData()

    },
    //获取考勤周数据
    async attMonthData() {
      let res = await this.$api.checking.postAttMonthData({ pageNum: 1, pageSize: 20, startTime: this.firstDay, endTime: this.lastDay });
      console.log(res.data.data.list);
      this.tableData = [...res.data.data.list]


    },
    printMySendList() {

      this.$refs.easyPrint.print()
    }

  },
  created() {
    //获取当前月份；
    this.nowMonth = dayjs().format('YYYY-MM')
    //获取当前月份的1号
    this.firstDay = dayjs(dayjs().format('YYYY-MM')).startOf('month').format('YYYY-MM--DD');//dayjs() 现在的时间，format('YYYY-MM')输出时间的格式
    //获取当前月份的最后一天
    this.lastDay = dayjs(dayjs().format('YYYY-MM')).endOf('month').format('YYYY-MM--DD')
    this.attMonthData()
  }
}
</script>
<style lang='less' scoped>
.header {
  position: relative;
  padding: 15px 15px 0 15px;
  display: flex;
  justify-content: space-between;
}

.header>h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
}

.header-right {
  font-size: 12px;
  display: flex;
  align-items: center;
}

.el-icon-arrow-right {
  padding: 0 5px;
  color: #ccc;
}

.el-icon-s-home {
  color: #444;
  display: inline-block;
  margin-right: 5px;
}

.font-left {
  color: #444;
}

.font-right {
  color: #777;
}

.content {
  padding: 15px;
  background-color: #f5f5f5;
}

.bar {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 10px;
  border-top: 3px solid #d2d6de;
  border-bottom: 1px solid #f4f4f4;
}

.barLeft {
  display: flex;
  align-items: center;
}

.barLeft>div {
  margin-left: 5px;
}

.barRight {
  display: flex;
}

.el-button-success {
  background-color: red;
}

.el-table-column {
  color: #333333;
  height: 37px;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fafafa;
  line-height: 30px;
}

.footerLeft {
  display: flex;
  margin-left: 5px;
  font-size: 12px;
}

.footerLeft>div {
  padding: 2px;
}

.mid {
  display: inline-block;
  margin: 0 5px;
}

.footerLeft>div>span {
  padding: 0 10px;
}

.footerRight {
  display: flex;
}

.footerBtn {
  width: 30px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>